<template>
	<view class="content"  @scroll="onPageScroll">
		<!-- 自定义头部导航栏 -->
		<navBar :opacity="opacity"></navBar>
		<view class="main f-bg">
			<!-- 列表 -->
			<view class="listNav">
				<view class="listNav01">
					<view class="icon iconfont icon-guanyuwomen- navIcon"></view>
					<view class="navText">关于我们</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-ershoushichang"></view>
					<view class="navText">二手市场</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-duihuanshangcheng"></view>
					<view class="navText">兑换商城</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-a-zu1701"></view>
					<view class="navText">骑手招募</view>
				</view>
			</view>
			<!-- 广播 -->
			<view class="broadcast">
				<view class="broadcast-main">
					<view class="icon iconfont icon-laba"></view>
					<view class="broadcast-text">
						<swiper :autoplay="true" style="height: 100%;" :interval="2000" circular vertical="true">
						      <swiper-item v-for="(item, index) in noticeArr" :key="index">
						        <view class="item">{{ item.title }}</view>
						      </swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 分类选项 -->
			<view class="classification">
				<view class="paper sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/feizhi.png" mode=""></image>
				</view>
				<view class="clothes sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/yiwu.png" mode=""></image>
				</view>
				<view class="plastics sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/suliao.png" mode=""></image>
				</view>
				<view class="metal sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/jinshu.png" mode=""></image>
				</view>
				<view class="furniture sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/jiadian1.png" mode=""></image>
				</view>
				<view class="housekeeping sort" @tap="clickorder(orderPath)">
					<image src="../../static/images/jiazheng.png" mode=""></image>
				</view>
			</view>
			<!-- 回收指南 -->
			<view class="guide">
				<view class="guide_title">
					<text class="title">回收指南</text>
					<text class="hotline">客服热线：{{phon}}</text>
				</view>
				<view class="flowpath">
					<view class="reservation">
						<view class="icon iconfont icon-zaixianyuyue tubiao"></view>
						<text class="reservation-text">在线预约</text>
					</view>
					<view class="icon iconfont icon-yousanjiao-copy"></view>
					<view class="reservation">
						<view class="icon iconfont icon-shangmenfuwu tubiao"></view>
						<text class="reservation-text">免费上门</text>
					</view>
					<view class="icon iconfont icon-yousanjiao"></view>
					<view class="reservation">
						<view class="icon iconfont icon-wanchengdingdan tubiao"></view>
						<text class="reservation-text">完成订单</text>
					</view>
					<view class="icon iconfont icon-yousanjiao"></view>
					<view class="reservation">
						<view class="icon iconfont icon-yihuoqushouyi tubiao"></view>
						<text class="reservation-text">获取收益</text>
					</view>
				</view>
				<view class="recoveryButton" @tap="clickorder(orderPath)">立即回收</view>
			</view>
			<!-- 承诺 -->
			<view class="commitment">
				<view class="commitment-title">我们承诺</view>
				<view class="commitment-main">
					<view class="commitment-box">
						<view class="icon iconfont icon-jishi"></view>
						<view class="box-text">及时上门</view>
						<view class="box-text-fu">24小时内完成</view>
					</view>
					<view class="commitment-box">
						<view class="icon iconfont icon-jiagetouming"></view>
						<view class="box-text">价格透明</view>
						<view class="box-text-fu">线上价格透明</view>
					</view>
					<view class="commitment-box">
						<view class="icon iconfont icon-jindutiaoshouyidaozhang"></view>
						<view class="box-text">即时到账</view>
						<view class="box-text-fu">收益瞬时结算</view>
					</view>
				</view>
			</view>
		</view>
		<tabBar currentPage="index"></tabBar>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js";//引入封装的请求
	import tabBar from "@/component/commen/tabbar.vue"//引入底部组件
	import navBar from "@/component/commen/navBar.vue"//引入头部组件
	export default {
		components:{
			tabBar,navBar
		},
		data() {
			return {
				dataArray: ['Item 1', 'Item 2', 'Item 3'], // 示例数组数据
				scrollTop:0,//屏幕滚动高度
				opacity:0,//
				noticeArr:[],//公告列表
				phon:"",//手机号
				orderPath:"orderNow",//立即回收页面路径
			}
		},
		onLoad() {

		},
		mounted(){
			this.getNotice()
			// this.getUserPosition()
		},
		methods: {
			onPageScroll(e){
				// console.log(e)
				this.scrollTop = e.scrollTop
				if(this.scrollTop<=105){
					this.opacity = this.scrollTop / 105 * 1
				}else{
					this.opacity = 1
				}
				// console.log(this.opacity)
			},
			getNotice(){
				$http({//获取公告信息
					url:"?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=notice&&m=wjyk_recycle&sign=6ea1c239f5d22ab19624b9406511d662",
					method:"get"
				}).then((res)=>{
					// console.log("公告信息：",res)
					this.noticeArr = res.data
				})
				$http({//获取手机号
					url:"?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=system&&m=wjyk_recycle&sign=9c41661c789497278b7b80e03f86de09",
					method:"get"
				}).then((res)=>{
					// console.log("手机号:",res)
					this.phon = res.data.report_phone
					uni.setStorage({
						key:"phon",
						data:this.phon
					})
				})
			},
			getUserPosition(){//获取用户位置授权
				uni.getLocation({
					type: 'gcj02',
					  success: (res) => {
						console.log(res)
					    const latitude = res.latitude;
					    const longitude = res.longitude;
					    // 处理获取到的定位信息
					  },
					  fail: (err) => {
					    // 处理获取定位失败的情况
					  }
				})
			},
			clickorder(e){//点击立即回收按钮
				console.log(e)
				this.navigateTo({
					url:`../../pages/${e}/${e}`,
					animationType:"fade-in",
					animationDuration:0
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		// padding: 0 2vw;
		box-sizing: border-box;
		.main{
			margin: 0 20rpx;
			// height: 60vh;
			// background: #fff;
			// border: 1px solid #f00;
			position: relative;
			// title列表
			.listNav{
				// border: 1px solid #f00;
				// height: 150rpx;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 10rpx;
				width: 100%;
				position: absolute;
				top: -20rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				.listNav01{
					text-align: center;
					// border: 1px solid #f00;
					.icon{
						// display: inline-block;
						font-size: 66rpx;
						// border: 1px solid #000;
					}
					.navText{
						font-size: 29rpx;
					}
				}
			}
			// 广播
			.broadcast{
				// height: 15vh;
				// margin-top: 14vh;
				padding-top: 145rpx;
				// border: 1px solid #000;
				.broadcast-main{
					display: flex;
					align-items: center; /* 垂直方向居中对齐 */
					background: #fff;
					// border: #f00 1px solid;
					// padding:10rpx;
					height: 60rpx;
					border-radius: 10rpx;
					.broadcast-text{
						font-size: 28rpx;
						width: 100%;
						height: 100%;
						margin-left: 16rpx;
						line-height: 60rpx;
						// border: 1px solid #f00;
						.item{
							// border:1px solid #f00;
							height: 90%;
							width: 97%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
			// 分类选项
			.classification{
				// height: 26vh;
				// border: 1px solid #f00;
				margin-top: 20rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.sort{
					// color: #fff;
					margin: 10rpx 0;
					width: 30%;
					// height: 10vh;
					// border: 1px solid #000;
					// border-radius: 5px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						width: 208rpx;
						height:120rpx;
					}
				}
			}
			// 回收指南
			.guide{
				background: #fff;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				.guide_title{
					display: flex;
					justify-content: space-between;
					.title{
						font-size: 29rpx;
						font-weight: bold;
					}
					.hotline{
						font-size: 29rpx;
						color: #0d0;
					}
				}
				.flowpath{
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					.reservation{
						text-align: center;
						.tubiao{
							// border:1px solid #f00;
							font-size: 60rpx;
						}
						.reservation-text{
							font-size: 28rpx;
						}
					}
					.icon-yousanjiao-copy,.icon-yousanjiao{
						transform: translateY(10%);
					}
				}
				.recoveryButton{
					background: #02bb8e;
					width: 85%;
					margin: 20rpx auto 0 auto;
					padding: 20rpx 0;
					box-sizing: border-box;
					border-radius: 40rpx;
					font-size: 29rpx;
					text-align: center;
					color: #fff;
					font-weight: bold;
				}
			}
			// 承诺
			.commitment{
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx 20rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
				.commitment-title{
					font-size: 29rpx;
					font-weight: bold;
				}
				.commitment-main{
					box-sizing: border-box;
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					.commitment-box{
						width: 31%;
						background: #f5f5f5;
						text-align: center;
						box-shadow: 0 0 10rpx #d8d8d8;
						border-radius: 6rpx;
						padding: 20rpx 0;
						.icon{
							// border: 1px solid #000;
							font-size: 66rpx;
						}
						.box-text{
							font-size: 29rpx;
							font-weight: bold;
						}
						.box-text-fu{
							font-size: 27rpx;
							color: #b4b4b4;
						}
					}
				}
			}
		}
	}
</style>
